<template>
  <div>
    <div class="herdertop">
      <img src="../../assets/top.png" alt="" class="topImg" />
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>服务工单管理</el-breadcrumb-item>
        <el-breadcrumb-item>服务工单列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="orderList" ref="orderList">
      <div style="width:100%;height:10px;background-color:##EBEEF1"></div>
      <div class="searchBar">
        <!-- 日期时间选择 -->
        <div class="dateTimePack marginRight">
          <el-date-picker
            v-model="rangeDateTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            size="mini"
            align="right"
            prefix-icon="el-icon-date"
            clear-icon="el-icon-close"
          >
          </el-date-picker>
        </div>
        <!-- 订单状态选择 -->
        <div class="orderStatus marginRight">
          <span>工单状态：</span>
          <el-select placeholder="请选择" v-model="orderStatus">
            <el-option
              v-for="(item, index) in WorkOrderStatusOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <!-- 城市 -->
        <div class="city marginRight">
          <span>城市：</span>
          <el-select v-model="city" placeholder="请选择">
            <el-option
              v-for="(item, index) in cityOptions"
              :key="index"
              :label="item.cityName"
              :value="item.cityCode"
            >
            </el-option>
          </el-select>
        </div>
        <!-- 商圈 -->
        <div class="city marginRight">
          <span>商圈：</span>
          <el-select
            placeholder="请选择"
            v-model="market"
            :disabled="marketOptions.length <= 1"
          >
            <el-option
              v-for="(item, index) in marketOptions"
              :key="index"
              :label="item.businessAreaName"
              :value="item.businessAreaCode"
            >
            </el-option>
          </el-select>
          <!-- 导出 -->
        </div>
        <!-- 商品类型 -->
        <div class="orderStatus marginRight">
          <span>商品类型：</span>
          <el-select placeholder="请选择" v-model="orderItemType">
            <el-option
              v-for="(item, index) in orderItemTypeOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <!-- 员工姓名 -->
        <div class="userSearch marginRight">
          <el-select
            v-model="userSearch"
            placeholder="请选择"
            @change="cleandata"
          >
            <el-option
              v-for="(item, index) in userSearchOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input v-model="searchValue" :placeholder="placeholder"></el-input>
          <!-- <el-button
            icon="el-icon-search"
            @click="searchForUserInformation"
          ></el-button> -->
        </div>
        <!--  账号状态搜索信息 -->
        <div class="demo-input-suffix" style="margin-right:35px">
          <el-button
            style="background-color:#fd804c;color: #fff;"
            size="small"
            @click.native.prevent="isSelect"
            >查询</el-button
          >
          <el-button
            style="background-color:#fd804c;color: #fff;"
            size="small"
            @click="downloadNew"
            >导出</el-button
          >
          <el-button type="warning" size="small" @click.native.prevent="isEmpty"
            >清空</el-button
          >
        </div>
      </div>
      <!-- 服务信息 -->
      <div class="serveTop">
        <span class="serveInformation">服务信息</span>
        <span class="serveInformation">商品类型</span>
        <!-- <span>城市/商圈</span> -->
        <!-- <span>预计可得佣金</span> -->
        <!-- <span>预计可得佣金</span> -->
        <span style="width: 77px;">员工编号</span>
        <span>员工姓名</span>
        <span>员工手机号</span>
        <span>服务地址</span>
        <span class="orderMoney">工单状态</span>
      </div>
      <!-- 工单列表 -->
      <work-list :list="paginationList"></work-list>
    </div>
    <!-- 分页 -->
    <div class="pagination" v-if="list.length > 0">
      <div class="left"></div>
      <div class="right">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          :current-page.sync="pagination.currentPage"
          :page-size="pagination.pageSize"
          :total="pagination.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import workList from "./workList.vue";
import moment from "moment";
import { download } from "../../utils/exportCsv";
export default {
  components: { workList },
  data() {
    const cityOptions = [{ cityCode: "", cityName: "全部" }];
    const marketOptions = [{ businessAreaCode: "", businessAreaName: "全部" }];
    const WorkOrderStatusOptions = [
      { value: "", label: "全部" },
      { value: 1, label: "待上门" },
      { value: 2, label: "待服务" },
      { value: 3, label: "服务中" },
      { value: 4, label: "已完成" },
      { value: 5, label: "已取消" }
      // { value: 6, label: '已挂起' },
      // { value: 7, label: '已迟到' },
      // { value: 8, label: '已超时' },
    ];
    const userSearchOptions = [
      { value: 1, label: "工单编号" },
      { value: 2, label: "订单编号" },
      { value: 3, label: "员工姓名" },
      { value: 4, label: "员工手机号" },
      { value: 5, label: "员工编号" }
    ];
    const orderItemTypeOptions = [
      { value: "", label: "全部" },
      { value: 0, label: "单项商品" },
      { value: 1, label: "保洁体验卡" },
      { value: 2, label: "家务师体验卡" },
      { value: 3, label: "保洁周期卡" },
      { value: 4, label: "家务师周期卡" }
    ];
    return {
      //工单状态
      WorkOrderStatusOptions,
      orderStatus: "",
      //员工姓名
      userSearchOptions,
      userSearch: 5,
      searchValue: "",
      staffCode: "",
      //城市
      cityOptions,
      city: "",
      //商圈
      marketOptions,
      market: "",
      //时间
      rangeDateTime: [new Date() - 3600 * 24 * 30 * 1000, new Date()],
      // 分页数据
      pagination: {
        currentPage: 1, //当前页
        pageSize: 20, // 每页条数
        currentPage: 1, //当前页
        total: 0 // 数据总量
      },
      list: [],
      paginationList: [], // 分页列表
      orderNo: "",
      phone: "",
      realName: "",
      subRgCode: "",
      workOrderNo: "",
      isHangUp: "",
      attachStatus: "",
      //商品类型
      orderItemTypeOptions,
      orderItemType: "",
      isJingZhunSearch: false, // 是否是精准搜索
      isfirstIn: true // 第一次进入页面
    };
  },
  computed: {
    placeholder() {
      if (this.userSearch == 1) {
        return "请输入工单编号";
      }
      if (this.userSearch == 2) {
        return "请输入订单编号";
      }
      if (this.userSearch == 3) {
        return "请输入员工姓名";
      }
      if (this.userSearch == 4) {
        return "请输入员工手机号";
      }
      if (this.userSearch == 5) {
        return "请输入员工编号";
      }
    }
  },
  methods: {
    //查询
    isSelect() {
      if (this.userSearch == 1) {
        this.workOrderNo = this.searchValue || "";
      } else if (this.userSearch == 2) {
        this.orderNo = this.searchValue || "";
      } else if (this.userSearch == 3) {
        this.realName = this.searchValue || "";
      } else if (this.userSearch == 4) {
        this.phone = this.searchValue || "";
      } else if (this.userSearch == 5) {
        this.staffCode = this.searchValue || "";
      }
      (this.pagination.currentPageQ = 1),
        (this.pagination.currentPage = 1),
        (this.pagination.pageSize = 20),
        this.search();
    },
    cleandata() {
      this.workOrderNo = "";
      this.orderNo = "";
      this.realName = "";
      this.phone = "";
      this.staffCode = "";
    },
    //清空
    isEmpty() {
      (this.orderStatus = ""),
        (this.userSearchOptions = [
          { value: 1, label: "工单编号" },
          { value: 2, label: "订单编号" },
          { value: 3, label: "员工姓名" },
          { value: 4, label: "员工手机号" },
          { value: 5, label: "员工编号" }
        ]);
      this.orderItemTypeOptions;

      this.WorkOrderStatusOptions = [
        { value: "", label: "全部" },
        { value: 1, label: "待上门" },
        { value: 2, label: "待服务" },
        { value: 3, label: "服务中" },
        { value: 4, label: "已完成" },
        { value: 5, label: "已取消" }
        // { value: 6, label: '已挂起' },
        // { value: 7, label: '已迟到' },
        // { value: 8, label: '已超时' },
      ];
      (this.userSearch = 5),
        (this.searchValue = ""),
        (this.staffCode = ""),
        this.cityOptions,
        (this.city = ""),
        (this.market = ""),
        (this.rangeDateTime = [new Date() - 3600 * 24 * 30 * 1000, new Date()]),
        (this.pagination = {
          currentPageQ: 1, //当前页
          pageSize: 20, // 每页条数
          currentPage: 1, //当前页
          total: 0 // 数据总量
        }),
        (this.orderNo = ""),
        (this.phone = ""),
        (this.realName = ""),
        (this.subRgCode = ""),
        (this.orderItemType = ""),
        (this.workOrderNo = ""),
        (this.isHangUp = ""),
        (this.attachStatus = ""),
        this.search();
    },
    download() {
      const fields = [
        "订单编号",
        "工单编号",
        "商品类型",
        "预约时间",
        "商品名称",
        "员工姓名",
        "员工手机号",
        "实付金额",
        "服务人数",
        "城市",
        "商圈",
        "服务地址",
        "状态"
      ];
      const fileName = `订单${moment(new Date()).format(
        "YYYY-MM-DD HH:mm:ss"
      )}.csv`;
      const list = this.list;
      list.forEach(item => {
        item["订单编号"] = item.orderNo;
        item["工单编号"] = item.workOrderNo;
        item["商品类型"] = item.orderItemType;
        item["预约时间"] = item.serviceStartTime;
        item["商品名称"] = item.goodsTitle;
        item["员工姓名"] = item.staffName;
        item["员工手机号"] = item.phone;
        item["服务地址"] = item.address;
        item["城市"] = item.subRgCode;
        item["商圈"] = item.businessAreaCode;
        item["状态"] = item.orderStatus;
      });
      download(list, fields, fileName);
    },
    //导出
    downloadNew() {
      const searchObj = {
        "1": "workOrderNo",
        "2": "orderNo",
        "3": "realName",
        "4": "phone",
        "5": "staffCode"
      };
      const searchKey = searchObj[this.userSearch];
      let paramsData = {};
      paramsData = {
        startTime:
          this.rangeDateTime && this.rangeDateTime[0]
            ? moment(this.rangeDateTime && this.rangeDateTime[0]).format(
                "YYYY-MM-DD HH:mm:ss"
              )
            : "",
        endTime:
          this.rangeDateTime && this.rangeDateTime[1]
            ? moment(this.rangeDateTime && this.rangeDateTime[1]).format(
                "YYYY-MM-DD HH:mm:ss"
              )
            : "",
        realName: this.realName,
        phone: this.phone,
        staffCode: this.staffCode,
        orderNo: this.orderNo,
        workOrderNo: this.workOrderNo,
        orderStatus: this.orderStatus,
        subRgCode: this.city,
        businessAreaCode: this.market,
        orderItemType: this.orderItemType
        // [searchKey]: this.searchValue
      };
      if (this.isJingZhunSearch && this.searchValue) {
        paramsData = {
          [searchKey]: this.searchValue
        };
      }
      if (window.location.host == "hs.xstarlife.com") {
        this.$http({
          url:
            "https://hs.xstarlife.com/api/hssorderadmin/order/memOrder/downloadWorkOrder",
          method: "get",
          responseType: "blob",
          headers: {
            "Content-Type": "application/json;charset=utf-8"
          },
          params: paramsData
        }).then(data => {
          if (!data) return;
          let url = window.URL.createObjectURL(new Blob([data]));
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          //console.log(link.href);
          const fileName = `工单${moment().get("year")}年${moment().get(
            "month"
          ) + 1}月${moment().get("date")}日${moment().get(
            "hours"
          )}时${moment().get("minutes")}分${moment().get("seconds")}秒.xlsx`;
          link.setAttribute("download", fileName);
          document.body.appendChild(link);
          link.click();
        });
      } else {
        this.$http({
          url: "/hssorderadmin/order/memOrder/downloadWorkOrder",
          method: "get",
          responseType: "blob",
          headers: {
            "Content-Type": "application/json;charset=utf-8"
          },
          params: paramsData
        }).then(data => {
          if (!data) return;
          let url = window.URL.createObjectURL(new Blob([data]));
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          //console.log(link.href);
          const fileName = `工单${moment().get("year")}年${moment().get(
            "month"
          ) + 1}月${moment().get("date")}日${moment().get(
            "hours"
          )}时${moment().get("minutes")}分${moment().get("seconds")}秒.xlsx`;
          link.setAttribute("download", fileName);
          document.body.appendChild(link);
          link.click();
        });
      }
    },
    //工单列表
    search() {
      this.isJingZhunSearch = false;
      const data = {
        orderStatus: this.orderStatus,
        startTime:
          this.rangeDateTime && this.rangeDateTime[0]
            ? moment(this.rangeDateTime && this.rangeDateTime[0]).format(
                "YYYY-MM-DD HH:mm:ss"
              )
            : "",
        endTime:
          this.rangeDateTime && this.rangeDateTime[1]
            ? moment(this.rangeDateTime && this.rangeDateTime[1]).format(
                "YYYY-MM-DD HH:mm:ss"
              )
            : "",
        businessAreaCode: this.market,
        orderNo: this.orderNo,
        phone: this.phone,
        realName: this.realName,
        orderItemType: this.orderItemType,
        subRgCode: this.city,
        workOrderNo: this.workOrderNo,
        staffCode: this.staffCode,
        pageNum: this.pagination.currentPage,
        pageSize: this.pagination.pageSize
      };
      this.$http({
        url: "/hssorderadmin/order/memOrder/findAllWorkOrderNo",
        method: "POST",
        data
      }).then(res => {
        //console.log(res.data, "列表");
        this.list = res.data.list;

        // 分页参数
        // this.pagination.total = res.data.length;
        // this.paginationList = this.list.slice(
        //   (this.pagination.currentPage - 1) * this.pagination.pageSize,
        //   this.pagination.currentPage * this.pagination.pageSize
        // );
        this.pagination.total = res.data.total;
        this.pagination.currentPage = res.data.pageNum;
        this.paginationList = res.data.list;
      });
    },
    // 分页  当前页变化
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
      this.pagination.currentPage = val;
      if (this.isJingZhunSearch) {
        this.searchForUserInformation();
      } else {
        this.search();
      }
    },
    initData() {
      this.orderStatus = "";
      this.rangeDateTime = [new Date() - 3600 * 24 * 30 * 1000, new Date()];
      this.payMd = "";
      this.city = "";
      this.market = "";
      this.searchValue = "";
      this.orderItemType = "";
    }
  },
  watch: {
    city(newValue) {
      this.pagination.currentPage = 1;
      // 监听城市的选择 调用商圈接口
      if (newValue) {
        const businessArray = this.cityOptions.find(
          item => item.cityCode === newValue
        ).businessCityInfo;
        if (businessArray) {
          this.marketOptions = [
            { businessAreaCode: "", businessAreaName: "全部" }
          ];
          this.marketOptions = this.marketOptions.concat(businessArray);
          this.market = "";
        }
      }
    }
  },

  activated() {
    // 重置初始化数据
    this.initData();
    const staffCode = this.$route.query.staffCode;
    this.searchValue = staffCode;
    // 默认查询
    this.$http({
      url: "/hssorderadmin/order/memOrder/findAllWorkOrderNo",
      method: "POST",
      data: {
        pageNum: this.pagination.currentPage,
        pageSize: this.pagination.pageSize,
        staffCode: this.searchValue,
        startTime: moment(new Date() - 3600 * 24 * 30 * 1000).format(
          "YYYY-MM-DD HH:mm:ss"
        ),
        endTime: moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
      }
    }).then(res => {
      this.list = res.data.list;
      // 分页参数
      // this.pagination.total = res.data.total;
      // this.paginationList = this.list.slice(
      //   (this.pagination.currentPage - 1) * this.pagination.pageSize,
      //   this.pagination.currentPage * this.pagination.pageSize
      // );
      this.pagination.total = res.data.total;
      this.pagination.currentPage = res.data.pageNum;
      this.paginationList = res.data.list;
    });
  },
  created() {
    // 获取城市map
    this.$http({
      url: "/staffadmin/homeService/staffManager/fetchCityAndBusiness",
      method: "get"
    }).then(res => {
      if (res) {
        this.cityOptions = this.cityOptions.concat(res);
      }
    });
  }
};
</script>

<style lang="scss" scoped>
.marginRight {
  margin-right: 30px;
}
.userSearch {
  display: flex;
  /deep/ .el-input__inner {
    box-sizing: border-box;
    height: 32px;
    border-radius: 0;
    width: 139px;
    border: 1px solid #dcdfe6;
    padding-right: 5px;
  }
  /deep/ .el-icon-arrow-up:before {
    position: relative;
    top: -4px;
  }
  /deep/ .el-button {
    height: 32px;
    border-radius: 0;
    background-color: #fff;
    border: 1px solid #dcdfe6;
    border-left: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    position: relative;
    .el-icon-search {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  /deep/ .el-input--suffix .el-input__inner {
    border-right: none;
  }
  /deep/ .el-input--suffix .el-input__inner {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
}
.herdertop {
  height: 8vh;
  display: flex;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.topImg {
  margin-right: 20px;
}
.orderList {
  background-color: #ebeef1;
  padding-left: 10px;
  padding-right: 10px;
  display: block;
  .searchBar {
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
    align-content: "space-between";
    padding: 5px 10px;
    height: 100px;
    background-color: white;
    position: relative;
    /deep/ .el-date-editor .el-range-input {
      width: 130px;
      font-size: 14px;
    }
    /deep/ .el-range-separator {
      width: 24px;
    }
    /deep/ .el-range-editor.el-input__inner {
      width: 320px;
      height: 32px;
      box-sizing: border-box;
      font-size: 14px;
    }
  }
  .orderStatus {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    /deep/ .el-input__inner {
      height: 32px;
      width: 90px;
    }
    /deep/ .el-icon-arrow-up:before {
      position: relative;
      top: -4px;
    }
  }
  .city {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    /deep/ .el-input__inner {
      height: 32px;
      width: 90px;
    }
    /deep/ .el-icon-arrow-up:before {
      position: relative;
      top: -4px;
    }
  }
}
.serveTop {
  text-align: center;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 65px;
  background-color: #fff;
  margin-top: 12px;
  .serveInformation {
    width: 90px;
    text-align: center;
  }
}
span {
  font-size: 14px;
  font-weight: 700;
  min-width: 75px;
}
</style>
<style lang="scss" scoped>
.pagination {
  height: 48px;
  box-sizing: border-box;
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
}

/deep/ span.el-checkbox__label {
  display: none;
}
</style>
